<template>
    <a-layout>
        <a-layout-sider width="200" style="background: #fff">
            <a-menu
                    v-model:selectedKeys="selectedKeys2"
                    v-model:openKeys="openKeys"
                    mode="inline"
                    :style="{ height: '100%', borderRight: 0 }"
            >
                <a-sub-menu key="sub1">
                    <template #title>
              <span>
                <user-outlined />
                商家管理
              </span>
                    </template>
                    <a-menu-item key="1">option1</a-menu-item>
                    <a-menu-item key="2">option2</a-menu-item>
                    <a-menu-item key="3">option3</a-menu-item>
                    <a-menu-item key="4">option4</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub2">
                    <template #title>
              <span>
                <laptop-outlined />
                商品管理
              </span>
                    </template>
                    <a-menu-item key="/admin/manager">
                        <router-link to="/admin/manager">品牌管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="/admin/specification">
                        <router-link to="/admin/specification">规格管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="/admin/typetemlate">
                        <router-link to="/admin/typetemlate">模板管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="/admin/item">
                        <router-link to="/admin/item">分类管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="9">
                        商品审核
                    </a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub3">
                    <template #title>
              <span>
                <notification-outlined />
                广告管理
              </span>
                    </template>
                    <a-menu-item key="/admin/contentcate">
                        <router-link to="/admin/contentcate">广告类别</router-link>
                    </a-menu-item>
                    <a-menu-item key="/admin/content">
                        <router-link to="/admin/content">广告内容</router-link>
                    </a-menu-item>
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 0 24px 24px">
            <a-layout-content
                    :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
            >
                <p>
                    <a-button type="primary" @click="add">新建</a-button>
                    <a-button type="primary" >刷新</a-button>
                </p>

                <a-table :dataSource="brandlist"
                         :columns="columns"
                         :pagination="pagination"
                         @change="handleTableChange"
                >
                    <template v-slot:action="{text,record}">
                        <a-button type="primary" @click="edit(record)">编辑</a-button>
                        <a-popconfirm
                                title="删除后无法恢复，确认删除吗?"
                                ok-text="是"
                                cancel-text="否"
                                @confirm="del(record.id)"
                        >
                            <a-button type="danger">删除</a-button>
                        </a-popconfirm>
                    </template>
                </a-table>
            </a-layout-content>
        </a-layout>
        <a-modal
                v-model:visible="modalVisible"
                title="品牌编辑表单"
                @ok="handlModalOk"
                cancel-text="取消"
                ok-text="确定">
            <a-form
                    :model="tbbrand"
                    :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }"
            >
                <!--        <a-form-item-->
                <!--                label="新闻类别"-->
                <!--        >-->
                <!--          <a-select v-model:value="tbbrand.categoryid">-->
                <!--            <a-select-option v-for="item in categoryList" :value="item.id" :key="item.id">-->
                <!--              {{item.cname}}-->
                <!--            </a-select-option>-->
                <!--          </a-select>-->
                <!--        </a-form-item>-->
                <!--        <a-form-item label="标题">-->
                <!--          <a-input v-model:value="news.title"></a-input>-->
                <!--        </a-form-item>-->
                <a-form-item label="品牌名称">
                    <a-input v-model:value="tbbrand.name"></a-input>
                </a-form-item>
                <a-form-item label="品牌首字母">
                    <a-input v-model:value="tbbrand.firstChar"></a-input>
                </a-form-item>
            </a-form>
        </a-modal>
    </a-layout>
</template>

<script lang="ts">
    import { defineComponent,onMounted,ref} from 'vue';
    import axios from "axios";
    import { message } from 'ant-design-vue';

    export default defineComponent({
        name: 'Manager',
        setup(){
            const brandlist =ref();
            const tbbrand = ref({});
            const columns= [
                {
                    title: '品牌id',
                    dataIndex: 'id',
                },
                {
                    title: '品牌名称',
                    dataIndex: 'name',
                },
                {
                    title: '品牌首字母',
                    dataIndex: 'firstChar',
                },
                {
                    title: 'Action',
                    key: 'action',
                    slots: {customRender:'action'}
                },
            ];

            const pagination=ref({
                current:1,
                pageSize:3,
                total:0,
            });


            const loading = ref<boolean>(false);
            const modalVisible = ref<boolean>(false);
            const categoryList = ref();

            const add=()=>{
                modalVisible.value=true;
                tbbrand.value={};
            }
            const edit=(record:any)=>{
                modalVisible.value=true;
                tbbrand.value = record;
            }

            const del=(id:number)=>{
                axios.delete('http://localhost:8899/brand-query/delete/'+id).then(response=>{
                    if (response.data.code==200){
                        //加载最新数据
                        handleQuery({
                            page:pagination.value.current,
                            size:pagination.value.pageSize
                        });
                    } else {
                        message.error(response.data.message);
                    }
                })
            }
            const handlModalOk=()=>{
                axios.post('http://localhost:8899/brand-query/update',tbbrand.value).then(response=>{
                    if (response.data.code==200){
                        modalVisible.value=false;
                        //加载最新数据
                        handleQuery({
                            page:pagination.value.current,
                            size:pagination.value.pageSize
                        });
                    } else  {
                        message.error(response.data.message);
                    }
                });
            }
            //点中分页导航
            const handleTableChange=(pagination:any)=>{
                handleQuery({
                    page:pagination.current,
                    size:pagination.size
                })
            }


            const handleQuery=(params:any)=>{
                axios.get('http://localhost:8899/brand-query/listByPage',{
                    params:{
                        page:params.page,
                        size:params.size,
                    }
                }).then((response)=>{
                    loading.value=false;
                    brandlist.value=response.data.list;
                    //重置分页按钮
                    pagination.value.current=params.page;
                    pagination.value.total=response.data.total;
                });
            }
            // const handleLoadNewsCategory=()=>{
            //     axios.get('http://localhost:8899/brand-query/findOne').then(response=>{
            //         categoryList.value = response.data;
            //     })
            // }
            onMounted(()=>{
                handleQuery({
                    page:1,
                    size:pagination.value.pageSize,
                });
                //handleLoadNewsCategory();
            });
            return{
                brandlist,
                columns,
                handleQuery,
                pagination,
                loading,
                handleTableChange,
                modalVisible,
                handlModalOk,
                add,
                categoryList,
                tbbrand,
                edit,
                del,
            }
        }
    });
</script>
